<template>
<div>
	
	<el-row>
	  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
	  <el-tag>基本信息</el-tag>
	</el-row>
	<el-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" size="small" class="demo-ruleForm">
	<el-form-item label="申请单位名称" prop="applicant_name">
		<el-input v-model="ruleForm.applicant_name" placeholder="请填写申请单位名称"></el-input>
	</el-form-item>
	<el-form-item label="申请单位地址"  prop="applicant_addres">
		<el-input v-model="ruleForm.applicant_addres" placeholder="请填写申请单位地址"></el-input>
	</el-form-item>
	<el-form-item label="单位联系人" prop="unit_contact">
	<el-input v-model="ruleForm.unit_contact" placeholder="请填写单位联系人"></el-input>
	</el-form-item>
	<el-form-item label="联系电话" prop="telephone">
	<el-input v-model="ruleForm.telephone" placeholder="请填写联系电话"></el-input>
	</el-form-item>
	<el-form-item label="E-mail" prop="E_mail">
	<el-input v-model="ruleForm.E_mail" placeholder="请填写电子邮箱"></el-input>
	</el-form-item>
	<el-form-item label="业务系统名称" prop="business_system_name">
	<el-input v-model="ruleForm.business_system_name" placeholder="请填写业务系统名称"></el-input>
	</el-form-item>
	<el-form-item label="接口人/电话" prop="interface_tel">
	<el-input v-model="ruleForm.interface_tel" placeholder="请填写接口人/电话"></el-input>
	</el-form-item>

	 <el-row>
	   <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
	   <el-tag>云主机</el-tag>
	 </el-row>
	  <el-form-item label="云主机名称" prop="cloud_machine_name">
		<el-input v-model="ruleForm.cloud_machine_name"></el-input>
	  </el-form-item>
	  <el-form-item label="操作系统/版本" prop="operating_system_version">
		<el-input v-model="ruleForm.operating_system_version"></el-input>
	  </el-form-item>
	  <el-form-item label="vCPU/个" prop="vCPU_number">
		<el-input v-model="ruleForm.vCPU_number"></el-input>
	  </el-form-item>
	  <el-form-item label="内存/G" prop="memory_G">
		<el-input v-model="ruleForm.memory_G"></el-input>
	  </el-form-item>
	  <el-form-item label="数据盘/G（分区）" prop="data_disk">
		<el-input v-model="ruleForm.data_disk"></el-input>
	  </el-form-item>
	  <el-form-item label="网络（IP/掩码/网关/VLAN）" prop="network">
		<el-input v-model="ruleForm.network"></el-input>
	  </el-form-item>
	  <el-form-item label="防火墙策略（源/目的IP/端口、协议）" prop="firewall_policy">
		<el-input v-model="ruleForm.firewall_policy"></el-input>
	  </el-form-item>
	  <el-form-item label="备注" prop="remarks1">
	  		<el-input v-model="ruleForm.remarks1"></el-input>
	  </el-form-item>
	  
	  <el-row>
	    <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
	    <el-tag>负载均衡</el-tag>
	  </el-row>
	    <el-form-item label="集群名" prop="cluster_name">
	  	<el-input v-model="ruleForm.cluster_name"></el-input>
	    </el-form-item>
	    <el-form-item label="节点" prop="node">
	  	<el-input v-model="ruleForm.node"></el-input>
	    </el-form-item>
	    <el-form-item label="服务器IP" prop="server_IP">
	  	<el-input v-model="ruleForm.server_IP"></el-input>
	    </el-form-item>
	    <el-form-item label="端口号" prop="port_ID">
	  	<el-input v-model="ruleForm.port_ID"></el-input>
	    </el-form-item>
	    <el-form-item label="VIP" prop="VIP">
	  	<el-input v-model="ruleForm.VIP"></el-input>
	    </el-form-item>
	    <el-form-item label="备注" prop="remarks2">
	  	<el-input v-model="ruleForm.remarks2"></el-input>
	    </el-form-item>
		
		
		<el-row>
		  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
		  <el-tag>网络互连</el-tag>
		</el-row>
		  <el-form-item label="10G链路(数量/要求)" prop="link_10G_quantity_requirement">
			<el-input v-model="ruleForm.link_10G_quantity_requirement"></el-input>
		  </el-form-item>
		  <el-form-item label="专线链路" prop="special_railway_line">
			<el-input v-model="ruleForm.special_railway_line"></el-input>
	    </el-form-item>
		 
		 
		 <el-row>
		   <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
		   <el-tag>物理机</el-tag>
		 </el-row>
		   <el-form-item label="规格" prop="pm_specifications">
		 	<el-input v-model="ruleForm.pm_specifications"></el-input>
		   </el-form-item>
		   <el-form-item label="主机名称" prop="pm_hostname">
		 	<el-input v-model="ruleForm.pm_hostname"></el-input>
		   </el-form-item>
		   <el-form-item label="操作系统类型、版本" prop="pm_operating_system_version">
		 	<el-input v-model="ruleForm.pm_operating_system_version"></el-input>
		   </el-form-item>
		   <el-form-item label="网络（IP/掩码/网关）" prop="pm_network">
		 	<el-input v-model="ruleForm.pm_network"></el-input>
		   </el-form-item>
		   <el-form-item label="防火墙策略（源/目的端口、协议）" prop="pm_firewall_policy">
		 	<el-input v-model="ruleForm.pm_firewall_policy"></el-input>
		   </el-form-item>
		   <el-form-item label="备注" prop="remarks3">
		 	<el-input v-model="ruleForm.remarks3"></el-input>
	    </el-form-item> 
		 
		 <el-row>
		   <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
		 </el-row>
	</el-form-item>
	    <el-button type="primary" @click="submitForm">提交审批</el-button>
	    <el-button @click="resetForm('ruleForm')">重置</el-button>
	  </el-form-item>
	  
	</el-form>
	    
	
</div>
</template>


<script>
import axios from 'axios'
export default {
	data() {
		return {
			ruleForm: {
				applicant_name: '',
				applicant_addres:'',
				unit_contact: '',
				telephone: '',
				E_mail: '',
				business_system_name: '',
				interface_tel: '',
				cloud_machine_name:'',
				operating_system_version: '',
				vCPU_number:'',
				memory_G: '',
				data_disk: '',
				network: '',
				firewall_policy: '',
				remarks1: '',
				cluster_name: '',
				node:'',
				server_IP: '',
				port_ID: '',
				VIP: '',
				remarks2: '',
				link_10G_quantity_requirement: '',
				special_railway_line: '',
				pm_specifications:'',
				pm_hostname: '',
				pm_operating_system_version: '',
				pm_network: '',
				pm_firewall_policy:'',
				remarks3: ''
			},
			rules: {
				applicant_name: [
					{ required: true, message: '请输入申请单位名称', trigger: 'blur' }],
				applicant_addres: [
					{ required: true, message: '请输入申请单位地址', trigger: 'blur' }],
				unit_contact: [
					{ required: true, message: '请输入单位联系人', trigger: 'blur' }],
				telephone: [
					{ required: true, message: '请输入联系电话', trigger: 'blur' }],
				E_mail: [
					{ required: true, message: '请输入邮箱E-mail', trigger: 'blur' }],
				business_system_name: [
					{ required: true, message: '请输入业务系统名称', trigger: 'blur' }],
				interface_tel: [
					{ required: true, message: '请输入接口人/电话', trigger: 'blur' }],
			},
		};
	},
	methods: {
		handleClick(tab, event) {
			console.log(tab, event);
		},
		submitForm(){
			let name = localStorage.getItem('cur_username')
			axios
			.post('http://127.0.0.1:5000/init/',this.ruleForm,{
					params:{
						name:name
					}
				},
			)
			.then((res) =>{
				// console.log(this.addSite)
				if(res.data.code===201){
					this.$message({
						message: '添加成功！',
						type: 'success'
					})
					this.$router.push('dealt')
				}
			})
			.catch((error)=>{
					console.log(error);
			})
		},
		resetForm(formName) {
				this.$refs[formName].resetFields();
		},
	},
}
</script>